<template>
  <div>
    <el-button plain icon="el-icon-plus" @click="dialogFormVisible = true"
      >新增</el-button
    >

    <el-input placeholder="请输入档案号/姓名/电话" v-model="pageVo.name">
      <el-select
        v-model="pageVo.orderstatus"
        slot="prepend"
        style="width: 100px"
        placeholder="请选择"
      >
        <el-option label="请选择" :value="null"></el-option>
        <el-option label="待确定" :value="1"></el-option>
        <el-option label="已确定" :value="2"></el-option>
        <el-option label="已取消" :value="0"></el-option>
      </el-select>
      <el-button
        slot="append"
        type="primary"
        icon="el-icon-search"
        @click="onSubmit"
        >查询</el-button
      >
    </el-input>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="预约日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.orderdate }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="member.filenumber" label="档案号">
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.member.name }}</p>
            <p>预约类型: {{ scope.row.ordertype }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.member.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="member.phonenumber"
        label="手机号"
      ></el-table-column>
      <el-table-column prop="orderstatus" label="预约状态">
        <template slot-scope="scope">
          <span :style="getOrderStatusColor(scope.row)">
            {{
              scope.row.orderstatus == 1
                ? "待确定"
                : scope.row.orderstatus == 2
                ? "已确定"
                : "已取消"
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.orderstatus == 2 ? false : true"
            type="success"
            plain
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            >确认预约</el-button
          ><br />
          <el-button
            v-show="scope.row.orderstatus == 0 ? false : true"
            size="mini"
            type="danger"
            plain
            @click="handleDelete(scope.$index, scope.row)"
            >取消预约</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageVo.page"
        :page-sizes="[10, 20, 50]"
        :page-size="pageVo.num"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageVo.total"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="确定预约"
      style="border-radius: 100px"
      :visible.sync="visible"
      width="25%"
    >
      <span
        ><h5>请拨打{{ order.name }}的电话确认是否预约：{{ phone }}</h5></span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="orderQ">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="取消预约"
      style="border-radius: 100px"
      :visible.sync="QXvisible"
      width="25%"
    >
      <span
        ><h4>是否确定取消{{ order.name }}的预约</h4></span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="QXvisible = false">取消</el-button>
        <el-button type="primary" @click="orderQX">确定</el-button>
      </span>
    </el-dialog>

    <!-- 新增模态框 -->
    <el-dialog
      class="dialog"
      title="新增预约"
      :visible.sync="dialogFormVisible"
      width="1200px"
    >
      <el-container>
        <el-aside width="400px" class="aside">
          <el-form
            :model="member"
            :rules="rules"
            ref="member"
            label-width="80px"
          >
            <el-form-item label="姓名" prop="name">
              <el-input
                @blur="memberInfo"
                v-model="member.name"
                style="width: 300px"
              ></el-input>
            </el-form-item>

            <el-form-item label="身份证" prop="idcard">
              <el-input
                readonly
                v-model="member.idcard"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                type="date"
                readonly
                placeholder="选择日期"
                v-model="member.birthday"
                style="width: 300px"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" prop="phonenumber">
              <el-input
                readonly
                v-model="member.phonenumber"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input
                readonly
                v-model="member.age"
                style="width: 300px"
              ></el-input>
            </el-form-item>

            <el-form-item label="姓别" prop="sex">
              <el-input
                readonly
                v-model="member.sex"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="婚姻状态" prop="isOk">
              <el-input readonly v-model="member.isOk" style="width: 300px">
              </el-input>
            </el-form-item>
            <el-form-item label="预约时间" prop="date1">
              <el-date-picker
                type="date"
                @change="handleDateChange('member')"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                v-model="member.date1"
                style="width: 300px"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-aside>
        <el-container>
          <el-header class="header">
            <div style="margin-top: 5px; width: 300px">
              <el-input placeholder="套餐名称" v-model="pageVo2.name">
                <el-select
                  v-model="pageVo2.sex"
                  slot="prepend"
                  placeholder="性别"
                  style="width: 100px"
                >
                  <el-option label="性别" :value="null"></el-option>
                  <el-option label="适用男性" :value="1"></el-option>
                  <el-option label="男女不限" :value="2"></el-option>
                  <el-option label="适用女性" :value="0"></el-option>
                </el-select>
                <el-button
                  slot="append"
                  type="primary"
                  icon="el-icon-search"
                  @click="setmealInfo"
                  >搜索</el-button
                >
              </el-input>
            </div>
            <div>
              <el-table
                :data="setmeal"
                height="500"
                stripe
                style="width: 700px"
                @selection-change="handleSelectionChange"
              >
                <el-table-column prop="id" type="selection" width="50">
                </el-table-column>
                <el-table-column prop="name" label="套餐名称" width="180">
                </el-table-column>
                <el-table-column prop="sex" label="适用性别" width="100">
                  <template slot-scope="scope">
                    {{
                      scope.row.sex == 1
                        ? "适用男性"
                        : scope.row.sex == 2
                        ? "男女不限"
                        : "适用女性"
                    }}
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="套餐价格" width="100">
                </el-table-column>
                <el-table-column prop="remark" label="套餐介绍">
                </el-table-column>
              </el-table>
            </div>
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="pageVo2.page"
              :page-sizes="[10, 20, 50]"
              :page-size="pageVo2.num"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageVo2.total"
            >
            </el-pagination>
          </el-header>
        </el-container>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Add('member')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-dialog {
  border-radius: 15px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-input {
  width: 500px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-dialog__header {
  padding: 10px 20px 10px;
  background-color: #d3dce6;
}

.aside {
  /* background-color: #D3DCE6; */
  color: #333;
  text-align: center;
  line-height: 300px;
  border-right: 1px solid #ccc;
}
</style>
    
    <script>
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleSelectionChange(selectedRows) {
      this.orderAdd.setmealList = selectedRows.map((row) => row.id);
    },
    handleDateChange(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .get("/rear/LYN/yyorderSetting", {
              params: { date: this.member.date1 },
            })
            .then((req) => {
              if (req.data != "") {
                if (req.data.number == req.data.reservations) {
                  this.dateFalse = "2";
                } else {
                  this.dateFalse = "1";
                }
              } else {
                this.dateFalse = "3";
              }
            });
        } else {
          this.$message({
            message: "信息未输入完成",
            type: "error",
          });
          return false;
        }
      });
    },
    Add(formName) {
      if (this.dateFalse == "2") {
        this.$message({
          message: "预约人数已满 请联系客服拨打19026063473",
          type: "error",
        });
        return;
      }

      if (this.dateFalse == "3") {
        this.$message({
          message: "此时间暂未设置预约 请联系客服拨打19026063473",
          type: "error",
        });
        return;
      }

      if (this.orderAdd.setmealList.length === 0) {
        alert("至少选一个套餐");
        return;
      }

      if (this.orderAdd.setmealList == undefined) {
        alert("请选择套餐");
        return;
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.orderAdd.orderdate = this.member.date1;
          const loading = this.$loading({
            lock: true,
            text: "正在添加中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.2)",
          });
          this.axios.post("/rear/LYN/orderAdd", this.orderAdd).then((req) => {
            loading.close();
            if (req.data > 0) {
              this.info();
              this.dialogFormVisible = false;
              this.member = {};
              this.$message({
                message: "新增成功",
                type: "success",
              });
            } else {
              this.$message({
                message: "该用户当天已预约过了",
                type: "error",
              });
            }
          });
        } else {
          this.$message({
            message: "信息未输入完成",
            type: "error",
          });
          return false;
        }
      });
    },
    handleEdit(index, row) {
      this.visible = true;
      this.phone = row.member.phonenumber;
      this.order.id = row.id;
      this.order.membeid = row.membeid;
      this.order.name = row.member.name;
    },
    handleDelete(index, row) {
      this.QXvisible = true;
      this.order.id = row.id;
      this.order.name = row.member.name;
    },
    getOrderStatusColor(status) {
      if (status.orderstatus === 1) {
        return { color: "green" };
      } else if (status.orderstatus === 2) {
        return { color: "blue" };
      } else {
        return { color: "red" };
      }
    },
    info() {
      const loading = this.$loading({
        lock: true,
        text: "正在显示中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios.post("/rear/LYN/orderInfo", this.pageVo).then((req) => {
        loading.close();
        this.tableData = req.data.list;
        this.pageVo.total = req.data.total;
      });
    },
    setmealInfo() {
      const loading = this.$loading({
        lock: true,
        text: "正在显示中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios.post("/rear/LYN/setmealInfo", this.pageVo2).then((req) => {
        loading.close();
        this.setmeal = req.data.list;
        this.pageVo2.total = req.data.total;
      });
    },
    memberInfo() {
      if (this.member.name.length != 0) {
        const loading = this.$loading({
          lock: true,
          text: "正在查询中",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.2)",
        });
        this.axios
          .get("/rear/LYN/memberInfo", { params: { name: this.member.name } })
          .then((req) => {
            if (req.data != "") {
              loading.close();
              this.orderAdd.membeid = req.data.id;
              this.member = req.data;
              this.member.sex = this.member.sex == 1 ? "男" : "女";
              this.member.isOk = this.member.isOk == 1 ? "已婚" : "未婚";
            } else {
              loading.close();
              this.member = {};
              alert("未找到此人,请先注册");
            }
          });
      }
    },
    handleSizeChange1(val) {
      this.pageVo2.num = val;
      this.setmealInfo();
    },
    handleCurrentChange1(val) {
      this.pageVo2.page = val;
      this.setmealInfo();
    },
    handleSizeChange(val) {
      this.pageVo.num = val;
      this.info();
    },
    handleCurrentChange(val) {
      this.pageVo.page = val;
      this.info();
    },
    onSubmit() {
      const loading = this.$loading({
        lock: true,
        text: "正在查询中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios.post("/rear/LYN/orderInfo", this.pageVo).then((req) => {
        loading.close();
        this.tableData = req.data.list;
        this.total = req.data.total;
      });
    },
    orderQX() {
      const loading = this.$loading({
        lock: true,
        text: "取消预约中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios
        .post("/rear/LYN/orderQX", this.order)
        .then((req) => {
          if (req.data > 0) {
            loading.close();
            this.QXvisible = false;
            this.info();
            this.$message({
              message: "取消成功",
              type: "success",
            });
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    orderQ() {
      const loading = this.$loading({
        lock: true,
        text: "正在预约中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios
        .post("/rear/LYN/orderUp", this.order)
        .then((req) => {
          if (req.data > 0) {
            loading.close();
            this.visible = false;
            this.info();
            this.$message({
              message: "预约成功",
              type: "success",
            });
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
  },
  data() {
    return {
      orderAdd: { membeid: null, orderdate: null, setmealList: [] },
      dialogFormVisible: false,
      visible: false,
      dateFalse: "1",
      QXvisible: false,
      tableData: [],
      phone: null,
      name: null,
      order: { id: null, name: null },
      pageVo2: { name: null, sex: null, page: 1, num: 10, total: null },
      pageVo: { name: null, page: 1, num: 10, orderstatus: null, total: null },
      setmeal: [],
      member: {
        name: "",
        idcard: "",
        birthday: "",
        phonenumber: "",
        age: "",
        sex: "",
        isOk: "",
        date1: "",
      },
      rules: {
        name: [{ required: true, message: "请输入客户名称", trigger: "blur" }],
        date1: [{ required: true, message: "请输入预约时间", trigger: "blur" }],
        idcard: [
          { required: true, message: "请输入预约时间", trigger: "blur" },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now(); // 禁用大于当前时间的日期
        },
      },
    };
  },
  created() {
    this.info();
    this.setmealInfo();
  },
};
</script>